<template>
	<!-- 提示 -->
	<u-popup v-model="show" mode="center" :mask-close-able="type === 'confirm'? false: true" :width="width"
	 safe-area-inset-bottom>
		<view class="tips-container">
			<slot>
				<view class="tips-box list-bg">
					<u-icon v-show="type === 'success' || type === 'fall'" :name="type === 'success'?'checkmark-circle': 'close-circle'"
					 :color="type === 'success'?'#11caa1': '#fc6768'" size="120"></u-icon>
					<view :class="type === 'confirm' || type === 'other'? 'confrim': ''" class="tips-title white-text">
						<text>{{title}}</text>
					</view>
					<custom-submit v-show="type === 'success' || type === 'fall'" @click="_click" :marginTop="0" :title="i18n.common.confirm"></custom-submit>
					<view v-show="type === 'confirm' || type === 'other'" class="confirm-container">
						<text class="white-text bold" @click="cancle">{{i18n.common.cancel}}</text>
						<text class="main-color bold" @click="_click">{{i18n.common.confirm}}</text>
					</view>
				</view>
			</slot>
			<u-icon v-show="type === 'success' || type === 'fall'" @click="show = false" name="close-circle" color="#fff" size="70"></u-icon>
		</view>
	</u-popup>
</template>

<script>
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	export default {
		components: {
			CustomSubmit
		},
		data() {
			return {
				show: false,
				width: '520',
				type: 'success',
				title: '登录成功',
				btnText: '确定'
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		methods: {
			open(type, title, btnText) {
				this.show = true;
				this.type = type
				this.title = title
				this.btnText = btnText
			},
			_click() {
				this.show = false;
				if (this.type === 'other') return this.$emit('click');
				if (this.type === 'fall') return;

				if (this.type === 'success') return uni.switchTab({
					url: '/pages/index/index'
				});

				this.$store.dispatch('user/logout').then(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				});
			},
			cancle() {
				this.show = false;
				if (this.type === 'confirm') return uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tips-container {
		text-align: center;

		.tips-box {
			// height: 500rpx;
			padding: 74rpx 48rpx;
			border-radius: 20rpx;
			margin-bottom: 60rpx;

			.tips-title {
				font-size: 36rpx;
				margin: 50rpx 0;

				&.confrim {
					font-size: 32rpx;
					text-align: left;
				}
			}
		}

		.confirm-container {
			text-align: right;
			font-size: 32rpx;

			.main-color {
				margin-left: 60rpx;
			}
		}
	}
</style>
